<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style type="text/css">
        .form-container {
            margin: auto;
            border: 1px solid blue ;
            width: 80vw;
        }
        .form-item {
            display: flex;
            margin: 10px;
            border: 1px solid gray ;
            line-height: 30px;
        }
        .form-item>.label {
            flex-basis: 20%;
            text-align: right;
        }
        .form-item>.input {
            flex-basis: 60%;
        }
        .form-item>.message {
            flex-basis: 20%;
        }
        .form-item>.buttons {
            flex-basis: 60%;
            margin-left: 20%;
        }
    </style>
</head>
<body>

    <div class="form-container sign-in">
        <h4>用户登录</h4>
        <div>{{ message }}</div>
        <!-- POST `/user/sign/in` -->
        <form action="/user/sign/in" method="post">
            <div class="form-item">
                <span class="label">登录名称:</span>
                <span class="input">
                    <input type="text" name="username" value="{{username}}">
                </span>
                <span class="message">{{ usernameMessage }}</span>
            </div>
            <div class="form-item">
                <span class="label">登录密码:</span>
                <span class="input">
                    <input type="password" name="password" >
                </span>
                <span class="message">{{ passwordMessage }}</span>
            </div>
            <div class="form-item">
                <span class="buttons">
                    <button type="reset">重置</button>
                    <button type="submit">登录</button>
                </span>
            </div>
        </form>
    </div>
    
</body>
</html>